<template>
<div class="box">
    <!-- 竖导航栏 -->
    <nav>
        <ul>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
            <li><img src="@/assets/imgs/标签市场.png" alt=""></li>
        </ul>
    </nav>
    <!-- 白色框内容 -->
    <div class="content">
        <!-- 右上角头像姓名 -->
        <div class="info">
            <img src="@/assets/imgs/消息.png" alt="">
            <span class="avatar">
            </span>
            <p class="name">xxx</p>
          
        </div>
          
        <!-- 每一页的内容  在这里面编写添加内容，其他的不需要更改！！ -->
        <div>

            <studentPersonalInformation></studentPersonalInformation>

            <projectTeam></projectTeam>

            <studentPersonalInformation></studentPersonalInformation>

        </div>
    </div>
</div>
</template>

<script>

import studentPersonalInformation from '@/views/studentPersonalInformation/studentPersonalInformation.vue'
import studentModifyInformationPopup from '@/views/studentPersonalInformation/studentModifyInformationPopup.vue'
import projectTeam from '@/views/projectTeam/projectTeam.vue'
export default {
  name: 'index',
      components: {
          studentPersonalInformation,
          studentModifyInformationPopup,
          projectTeam,
          

    }

}
</script>

<style lang="less" scoped>
    .box{
        width: 1534px;
        height: 760px;
        background-color: rgb(194, 218, 226);
        position: relative;
        .content{
            position: absolute;
            top:8%;
            left: 10%;
            width: 85%;
            height: 85%;
            background-color: aliceblue;
            border-radius: 25px;
            box-shadow:#999 0 0 10px;
            .info{
                position: absolute;
                right: 140px;
                top: 30px;
                .avatar{
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    border: #999 solid 1px;
                    border-radius: 50%;
                    margin-left: 20px;

                }
                img{
                    width: 35px;
                    height: 35px;
                    margin-left: 20px;

                }
                .name{
                    position: absolute;
                    top:2px;
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    font-size: 28px;
                    margin-left: 20px;
                }
            }
     
        }
        nav{
            ul{
                position: absolute;
                 width: 60px;
                 top: 10%;
                 left: 50px;
                li{
                    margin-bottom: 30px;
                    list-style: none;
                    img{
                        width: 40px;
                        height: 40px;
                    }
                }
            }
        }
    }
</style>
